<template>
  <div class="login-container">
    <el-card class="login-card">
      <div class="login-title">
           <div  class="loader"></div>
      </div>
      <el-form :model="form" ref="loginForm" :rules="rules">
        <el-form-item label="用户" prop="email">
          <el-input v-model="form.email" type="text"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {nameRule, passRule} from '../utils/vaildate.js' // 表单验证
import {setToken} from '@/utils/setToken.js' // token封装
import {api} from "@/api/api";// 封装好的登录接口


export default {
  name: 'LoginForm',

  data() {
    return {
      form: {
        email: '',
        password: ''
      },
      rules: {
        email: [{validator: nameRule, trigger: 'blur'}],
        password: [{validator: passRule, trigger: 'blur'}]
      }
    };
  },
  methods: {
    login() {
      // 登录逻辑，可以在这里调用API进行登录验证（api）
          api(this.form)
          .then(res => {
            if (res.status === 200) {
              if (res.data.code === 1) {
                console.log(res.data.data)
                setToken('email',res.data.data.email);// 设置token
                setToken('token',res.data.data.token);// 设置token
                setToken('user_type',res.data.data.user_type);// 设置用户类型

                this.$message({
                  message: '登录成功',
                  type: 'success',
                });
                // 跳转到首页
                this.$router.push("/hello").catch(err => {
                  console.error(err);
                });
              } else if (res.data.msg === '密码错误') {
                this.$message.error('密码错误');
              } else if (res.data.msg === '账号不存在') {
                this.$message.error('账号不存在');
              } else {
                this.$message.error('登录失败');
              }
            } else {
              this.$message.error('登录失败');
            }
          })
          .catch(err => {
            console.log(err);
            this.$message.error('登录失败');
          });
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("../assets/img/bg.jpg");
  /* 背景图 */
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.login-card {
  width: 400px;
  height: 350px;
  margin: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  /* 设置背景颜色透明度为50% */
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: bold;
  padding-left: 15px;
}


/* HTML: <div class="loader"></div> */
.loader {
  font-weight: bold;
  font-family: monospace;
  display: inline-grid;
  font-size: 30px;
}
.loader:before,
.loader:after {
  content:"学生管理系统";
  grid-area: 1/1;
  -webkit-mask-size: 1.5ch 100%,100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-composite:exclude;
  animation: l36-1 1s infinite;
}
.loader:before {
  -webkit-mask-image:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0);
}
.loader:after {
  -webkit-mask-image:linear-gradient(#000 0 0);
  animation:
      l36-1  1s infinite,
      l36-2 .2s infinite cubic-bezier(0.5,200,0.5,-200);
}

@keyframes l36-1{
  0%   {-webkit-mask-position:0     0,0 0}
  20%  {-webkit-mask-position:.5ch  0,0 0}
  40%  {-webkit-mask-position:100%  0,0 0}
  60%  {-webkit-mask-position:4.5ch 0,0 0}
  80%  {-webkit-mask-position:6.5ch 0,0 0}
  100% {-webkit-mask-position:2.5ch 0,0 0}
}
@keyframes l36-2{
  100% {transform:translateY(0.2px)}
}
</style>
